<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <!-- 卡片——确认就诊人信息 -->
        <el-card class="box-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>请选择就诊人信息</span>
                    <el-button type="primary" size="default" @click="goUser" :icon="User">添加就诊人</el-button>
                </div>
            </template>
            <!-- 卡片的身体部分展示就诊人信息 -->
            <div class="user">
                <Visitor @click="changeIndex(index)" class="user-item" v-for="(user, index) in userArr" :key="user.id"
                    :user="user" :index="index" :currentUserIndex="currentUserIndex" :showDelete="false" />
            </div>
        </el-card>
        <!-- 卡片——确认医生信息 -->
        <el-card class="box-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>
            <!-- 卡片的身体部分展示医生信息 -->
            <el-descriptions class="doctor-info" :column="2" size="large" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期：
                        </div>
                    </template>
                    {{ doctorInfo?.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院：
                        </div>
                    </template>
                    {{ doctorInfo?.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室：
                        </div>
                    </template>
                    {{ doctorInfo?.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名：
                        </div>
                    </template>
                    {{ doctorInfo?.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称：
                        </div>
                    </template>
                    {{ doctorInfo?.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长：
                        </div>
                    </template>
                    {{ doctorInfo?.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            挂号费用：
                        </div>
                    </template>
                    <span style="color: red">{{ doctorInfo?.amount }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!-- 确定挂号按钮 -->
        <div class="btn">
            <el-button type="primary" size="default" :disabled="currentUserIndex === -1"
                @click="submitOrder">确认挂号</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
import { reqGetUser, reqDoctorInfo } from '@/api/hospital/index';
import type { UserArr, UserResponseData, DoctorInfoData, Doctor } from '@/api/hospital/type';
import { reqSubmitOrder } from "@/api/user";
import type { SubmitOrder } from "@/api/user/type";
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

//获取路由对象
const $route = useRoute();

//获取路由器对象
const $router = useRouter();

//记录该账号已有的就诊人信息
const userArr = ref<UserArr>([])
//记录医生的信息
const doctorInfo = ref<Doctor>();

//记录用户确定的就诊人索引值
const currentUserIndex = ref<number>(-1);


// 前往新增就诊人界面
const goUser = () => {
    $router.push({ path: "/user/userinfo", query: { type: "add",id:'' } });
}
// 点击就诊人卡片触发的回调函数
const changeIndex = (index: number) => {
    // 单次点击确定就诊人，再次点击同样的确诊人意味着取消
    currentUserIndex.value = index === currentUserIndex.value ? -1 : index;
}
// 点击确定挂号按钮触发的回调函数
const submitOrder = async () => {
    //医院编号
    const hoscode = doctorInfo.value!.hoscode;
    //医生的ID
    const scheduleId = doctorInfo.value!.id;
    //就诊人的ID
    const patientId = userArr.value[currentUserIndex.value].id;
    //提交订单
    const result: SubmitOrder = await reqSubmitOrder(hoscode, scheduleId, patientId);
    //提交订单成功
    if (result.code == 200) {
        $router.push({ path: "/user/order", query: { orderId: result.data } });
    } else {
        ElMessage({
            type: "error",
            message: result.message,
        });
    }
}

// 获取就诊人信息
const getUserData = async () => {
    const res: UserResponseData = await reqGetUser();
    if (res.code == 200)
        userArr.value = res.data
}
// 获取医生信息
const getDoctorData = async () => {
    const res: DoctorInfoData = await reqDoctorInfo($route.query.doctorId as string);
    if (res.code == 200)
        doctorInfo.value = res.data
}


// 组件挂载完毕获取数据
onMounted(() => {
    getUserData()
    getDoctorData()
})
</script>

<style scoped lang="scss">
.container {
    margin-left: 30px;

    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 22px;
    }

    .box-card {
        margin-top: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user {
            display: flex;
            flex-wrap: wrap;

            .user-item {
                width: 31%;
                margin: 10px
            }
        }

        .doctor-info {
            .cell-item {
                width: 100px;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }
}
</style>